 <template>
  <div>
    <nav-bar :options="navBarOptions" />
    <div class="content">
      <!-- <div class="brand">
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.brandName"
          input-align="right"
          right-icon="arrow-down"
          label="品牌"
          placeholder="请选择"
          @click="chooseBrand"
        />
      </div> -->
      <van-form ref="vanForm">
        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="普通刷卡费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              @click="toggle(0)"
            />
          </div>
          <transition-group name="van-fade"  mode="out-in">
            <div key="key1" class="input-box" v-show="showList[0].isShow">
              <van-field
                v-model="form.posDebitRate"
                :label="getStr('posDebitRate','借记卡费率')"
                :placeholder="getStr('posDebitRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("posDebitRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.posDebitAdd"
                label="借记卡笔数费"
                :placeholder="getStr('posDebitAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("posDebitAdd") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.posDebitLimit"
                label="借记卡封顶"
                :placeholder="getStr('posDebitLimit')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("posDebitLimit") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.posCreditRate"
                label="贷记卡费率"
                :placeholder="getStr('posCreditRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("posCreditRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.posCreditAdd"
                label="贷记卡笔数费"
                :placeholder="getStr('posCreditAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("posCreditAdd") }}</span>
                </template>
              </van-field>
            </div>
          </transition-group>
        </div>

        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="云闪付费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              @click="toggle(1)"
            />
          </div>
          <transition-group name="van-fade"  mode="out-in">
            <div key="key2" class="input-box" v-show="showList[1].isShow">
              <van-field
                v-model="form.ysfRate"
                label="云闪付费率"
                :placeholder="getStr('ysfRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("ysfRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.ysfAdd"
                label="云闪付笔数费"
                :placeholder="getStr('ysfAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("ysfAdd") }}</span>
                </template>
              </van-field>
            </div>
          </transition-group>
        </div>
        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="扫码费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              @click="toggle(2)"
            />
          </div>
          <transition-group name="van-fade"  mode="out-in">
            <div key="key3" class="input-box" v-show="showList[2].isShow">
              <van-field
                v-model="form.scanRate"
                label="扫码费率"
                :placeholder="getStr('scanRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("scanRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.scanAdd"
                label="扫码笔数费"
                :placeholder="getStr('scanAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("scanAdd") }}</span>
                </template>
              </van-field>
            </div>
          </transition-group>
        </div>

        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="VIP刷卡费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              @click="toggle(3)"
            />
          </div>
          <transition-group name="van-fade"  mode="out-in">
            <div key="key4" class="input-box" v-if="showList[3].isShow">
              <van-field
                v-model="form.vipDebitRate"
                label="借记卡费率"
                :placeholder="getStr('vipDebitRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("vipDebitRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.vipDebitAdd"
                label="借记卡笔数费"
                :placeholder="getStr('vipDebitAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("vipDebitAdd") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.vipDebitLimit"
                label="借记卡封顶"
                :placeholder="getStr('vipDebitLimit')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("vipDebitLimit") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.vipCreditRate"
                label="贷记卡费率"
                :placeholder="getStr('vipCreditRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("vipCreditRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.vipCreditAdd"
                label="贷记卡笔数费"
                :placeholder="getStr('vipCreditAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("vipCreditAdd") }}</span>
                </template>
              </van-field>
            </div>
          </transition-group>
        </div>
        <div class="item-box">
          <div>
            <van-field
              class="title-s"
              label="快捷支付费率"
              input-align="right"
              type="number"
              right-icon="arrow-down"
              readonly
              @click="toggle(4)"
            />
          </div>
          <transition-group name="van-fade"  mode="out-in">
            <div key="key5" class="input-box" v-if="showList[4].isShow">
              <van-field
                v-model="form.qpayRate"
                label="支付费率"
                :placeholder="getStr('qpayRate')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("qpayRate") }}</span>
                </template>
              </van-field>
              <van-field
                v-model="form.qpayAdd"
                label="支付笔数费"
                :placeholder="getStr('qpayAdd')"
                input-align="right"
                type="number"
                :readonly="!isInfo"
              >
                <template #right-icon>
                  <span>{{ getUnit("qpayAdd") }}</span>
                </template>
              </van-field>
            </div>
          </transition-group>
        </div>
      </van-form>
    </div>
    <!-- <van-popup v-model="brandP" position="bottom">
      <van-picker
        show-toolbar
        title="品牌"
        :columns="brandList"
        @confirm="brandChoose"
        value-key="brandName"
      />
    </van-popup> -->
  </div>
</template>
 
 <script>
import { signInfo, productSignCost } from "_a/traditionalV1/signInfo";
import {
  configureList,
  updateInfo,
  addInfo,
} from "_a/traditionalV1/subRateList";
import rateScopeData from "_c/utils/rateScopeData";

export default {
  data() {
    return {
      navBarOptions: {
        backPrevPage: true,
      },
      form: {},
      // form: {
      //   brandCode: "CT_V1_TEST",
      //   brandName: "传统1.0结算机测试1",
      //   posDebitRate: "0.51",
      //   posDebitAdd: "3",
      //   posDebitLimit: "20",
      //   posCreditRate: "0.52",
      //   posCreditAdd: "3",
      //   ysfRate: "0.29",
      //   ysfAdd: "3",
      //   scanRate: "0.29",
      //   scanAdd: "3",
      //   vipDebitAdd: "3",
      //   vipCreditAdd: "3",
      //   qpayAdd: "3",
      //   qpayRate: "0.5",
      //   vipCreditRate: "0.5",
      //   vipDebitRate: "0.5",
      //   vipDebitLimit: "20",
      // },
      brandP: false,
      brandList: [],
      isInfo: false,
      scopeData: rateScopeData, //配置数据
      isMyInfo: false, //是否为自己政策数据
      showList: [
        { isShow: true },
        { isShow: true },
        { isShow: true },
        { isShow: true },
        { isShow: true },
      ],
    };
  },
  created() {
    this.$tip.loading("加载中~~~");
    this.isMyInfo = this.$route.query.isMyInfo;
    let info = this.$storage.getStore({
      name: "brandRateInfo",
    });
    if (info) {
      this.form = JSON.parse(info);
      // this.getConfigure(this.form.brandCode);
    }
    // 获取可配置参数
    this.$tip.loaded();
    this.getBrandList();
  },
  methods: {
    toggle(num) {
      this.showList[num].isShow = !this.showList[num].isShow;
      this.$forceUpdate();
    },
    // 赋值配置参数最大值和最小值
    setMaxMinData(obj) {
      // console.log(this.scopeData);
      for (let i in obj.max) {
        this.scopeData[i].max = obj.max[i];
      }
      for (let i in obj.min) {
        this.scopeData[i].min = obj.min[i];
      }
      // console.log(this.scopeData)
    },
    getUnit(key) {
      if (!this.scopeData[key]) {
        return this.$error("参数缺少");
      }
      let str = `${this.scopeData[key].unit}`;
      return str;
    },
    getStr(key,label) {
      if (!this.scopeData[key]) {
        return this.$error("参数缺少");
      }
      console.log(arguments[1])
      if(arguments[1]){

      }
      let str = `输入范围${this.scopeData[key].min}至${this.scopeData[key].max}`;
      return str;
    },
    getBrandList() {
      signInfo({ pageSize: 999 }).then((res) => {
        this.brandList = res.data;
        // 自己的数据
        if (this.isMyInfo) {
          this.form.brandCode = this.brandList[0].brandCode;
          this.form.brandName = this.brandList[0].brandName;
          this.getCost(this.form.brandCode);
        }
      });
    },
    // 获取费率数据
    getCost(code) {
      this.$tip.loading();
      productSignCost({ brandCode: code }).then((res) => {
        this.$tip.loaded();
        this.form = res.data;
      });
    },
    // 获取成本配置数据
    getConfigure(code) {
      this.$tip.loading();
      configureList({ brandCode: code }).then((res) => {
        this.$tip.loaded();
        this.setMaxMinData(res.data);
      });
    },
    chooseBrand() {
      this.brandP = true;
    },
    brandChoose(item) {
      this.brandP = false;
      this.form.brandCode = item.brandCode;
      this.form.brandName = item.brandName;
      this.getConfigure(item.brandCode);
      //   console.log(item);
    },
    // 校检是否通过
    rateCheck(value, obj) {
      // console.log(value, obj);
      let isPass = true;
      if (!this.form.brandCode) {
        return (isPass = false);
      }
      if (!value) {
        return (isPass = false);
      }
      if (isNaN(value)) {
        isPass = false;
      } else {
        if (
          value <= this.scopeData[obj.key].max &&
          value >= this.scopeData[obj.key].min
        ) {
          isPass = true;
        } else {
          isPass = false;
        }
      }
      return isPass;
    },
    // 不通过返回消息
    rateMsg(value, obj) {
      let str = "";
      // if (!this.form.brandCode) {
      //   return (str = "请先选择品牌!");
      // }
      if (!value) {
        return (str = "不能为空");
      }
      if (isNaN(value)) {
        str = "请输入数字值";
      } else {
        if (
          value <= this.scopeData[obj.key].max &&
          value >= this.scopeData[obj.key].min
        ) {
        } else {
          str = "输入范围有误";
        }
      }
      if (str) {
        return str;
      }
    },
    toAdd() {
      this.$router.push({
        name: "terminal",
      });
    },
  },
};
</script>
 <style scoped lang='scss'>
.content {
  padding: R(22) R(25) R(60);
}
.title-s {
  background: linear-gradient(90deg, #e3ecff 0%, #fefeff 100%);
  border-radius: R(10);
}
.title-i {
  margin-bottom: R(30);
  font-size: R(28px);
  font-weight: 400;
  color: #1a1a1a;
}
.brand {
  //   margin-bottom: R(35);
}
/deep/input {
  height: auto;
}
.item-box {
  margin-top: R(26);
}
.input-box {
  border-radius: R(10);
  overflow: hidden;
}
.sure {
  margin-top: R(40);
}
</style>